<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>学生考试首页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }

        body {
            background-color: #f2f6fc;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* 顶部导航栏 */
        .header {
            background: #fff;
            box-shadow: 0 0 10px 4px rgba(1, 149, 255, 0.1);
            padding: 0 50px;
            z-index: 1000;
        }

        .nav-list {
            display: flex;
            height: 60px;
            align-items: center;
        }

        .logo {
            display: flex;
            align-items: center;
            font-size: 20px;
            font-weight: bold;
            color: #2f6c9f;
            margin-right: 30px;
        }

        .nav-item {
            height: 100%;
            display: flex;
            align-items: center;
            padding: 0 20px;
            position: relative;
            transition: all 0.3s;
        }

        .nav-item a {
            color: #334046;
            text-decoration: none;
            font-size: 16px;
            display: flex;
            align-items: center;
            height: 100%;
            transition: all 0.3s;
        }

        .nav-item:hover {
            background-color: #0195ff;
        }

        .nav-item:hover a {
            color: white;
        }

        .user-info {
            margin-left: auto;
            position: relative;
            cursor: pointer;
        }

        .user-dropdown {
            position: absolute;
            top: 60px;
            left: 0;
            width: 105px;
            background-color: white;
            border-radius: 2px;
            border-bottom: 3px solid #0195ff;
            overflow: hidden;
            z-index: 1001;
            display: none;
        }

        .user-dropdown p {
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: #334046;
            transition: all 0.3s;
        }

        .user-dropdown p:hover {
            background-color: #0195ff;
            color: white;
        }

        .user-dropdown .exit {
            color: #334046;
        }

        .user-info:hover .user-dropdown {
            display: block;
        }

        .user-info a {
            color: #334046;
            font-size: 15px;
            display: flex;
            align-items: center;
        }

        .user-icon {
            margin-right: 6px;
        }

        /* 主内容区 */
        .main-content {
            flex: 1;
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
            width: 100%;
        }

        /* 页脚 */
        .footer {
            background-color: #fff;
            color: #334046;
            padding: 20px 0;
            text-align: center;
            margin-top: auto;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
        }
    </style>
</head>
<body>
<!-- 顶部导航栏 -->
<div class="header">
    <ul class="nav-list">
        <li class="logo">
            <span>在线考试系统</span>
        </li>
        <li class="nav-item" id="examCenter">
            <a href="javascript:;">考试中心</a>
        </li>
        <li class="nav-item" id="practiceCenter">
            <a href="javascript:;">试卷练习</a>
        </li>
        <li class="nav-item">
            <a href="scoreTable.html">我的分数</a>
        </li>
        <li class="nav-item">
            <a href="message.html">交流区</a>
        </li>
        <li class="nav-item user-info">
            <a href="javascript:;">
                <i class="fa fa-user user-icon"></i>
                <span id="userName">加载中...</span>
            </a>
            <div class="user-dropdown">
                <p onclick="manage()">修改密码</p>
                <p class="exit" onclick="exit()">退出</p>
            </div>
        </li>
    </ul>
</div>

<!-- 主内容区 - 这里将根据路由显示不同内容 -->
<div class="main-content">
    <div class="layui-card">
        <div class="layui-card-header">欢迎使用在线考试系统</div>
        <div class="layui-card-body">
            <p>请从左侧菜单选择您要进行的操作：</p>
            <ul style="margin-top: 15px; padding-left: 20px;">
                <li>• 考试中心 - 参加正式考试</li>
                <li>• 试卷练习 - 进行模拟练习</li>
                <li>• 我的分数 - 查看历史成绩</li>
                <li>• 交流区 - 与其他学生交流</li>
            </ul>
        </div>
    </div>
</div>

<!-- 页脚 -->
<div class="footer">
    <div>在线考试系统 © 2023 版权所有</div>
</div>

<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    // 模拟从cookie获取用户信息
    function getUserInfo() {
        // 实际项目中应从cookie获取
        return {
            userName: "张三同学"
        };
    }

    // 初始化页面
    document.addEventListener('DOMContentLoaded', function() {
        const user = getUserInfo();

        // 设置用户名
        document.getElementById('userName').textContent = user.userName;

        // 设置导航点击事件
        document.getElementById('examCenter').addEventListener('click', function() {
            exam();
        });

        document.getElementById('practiceCenter').addEventListener('click', function() {
            practice();
        });
    });

    // 跳转到考试模式
    function exam() {
        // 设置考试模式
        localStorage.setItem('isPractice', 'false');
        window.location.href = 'startExam.html';
    }

    // 跳转到练习模式
    function practice() {
        // 设置练习模式
        localStorage.setItem('isPractice', 'true');
        window.location.href = 'startExam.html';
    }

    // 修改密码
    function manage() {
        window.location.href = 'manager.html';
    }

    // 退出系统
    function exit() {
        // 清除cookie
        document.cookie = "cname=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
        document.cookie = "cid=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
        document.cookie = "rb_token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
        document.cookie = "rb_role=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

        // 跳转到登录页
        window.location.href = "login.html";
    }
</script>
</body>
</html>